<template>
    <div class="image-box" :style="padding">
        <Hover v-if="hover.showHover" :brickInfo="brickInfo" :hover="hover"/>
        <img v-if="content.url" class="image-item" :src="content.url">
        <img v-else class="image-item" src="./imgs/default.png">
    </div>
</template>

<script>
    import Hover from '../common/mainpage/Hover.vue';

    export default {
        name: 'YXImage',
        props: {
            hover: {
                type: Object,
                default: _ => {
                    return {
                        showHover: false,
                        brickHover: true
                    };
                }
            },
            isEdit: {
                type: Boolean,
                default: false
            },
            brickInfo: {
                type: Object,
                default: _ => {
                    return {
                        active: false
                    };
                }
            },
            content: {
                type: Object,
                default: _ => {
                    return {
                        url: ''
                    };
                }
            },
            appearance: {
                type: Object,
                default: _ => {
                    return {
                        padding: {
                            top: 0,
                            right: 0,
                            bottom: 0,
                            left: 0
                        }
                    };
                }
            }
        },
        components: {
            Hover
        },
        computed: {
            padding() {
                let ap = this.appearance.padding;
                return `padding: ${ap.top}px ${ap.right}px ${ap.bottom}px ${ap.left}px;`;
            }
        }
    }
</script>

<style scoped lang="scss">
    .image-box {
        position: relative;

        .image-item {
            width: 100%;
            vertical-align: middle;
        }
    }
</style>
